﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Type Kit</title>
    <script type="text/javascript" src="http://use.typekit.com/uzd8nfb.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <style type="text/css">
        body { font-family: "calluna-1","calluna-2"; background-image: url('noise.png'); background-repeat: no-repeat; background-color: #fff; color: #515151; margin: 0; padding: 0; }
        li { list-style: none outside none; margin: 0; padding: 0; }
        ul { margin: 0; padding: 0; list-style: none outside none; }
        h1 { font-family: "anivers-1","anivers-2",sans-serif; color: #000; }
        p { font-size: 1em; line-height: 1.55em; }
        p a { text-decoration: underline; }
        a { text-decoration: none; color: #c91193; }
        a:hover { color: #880161; }
        img { border: 0;}
        .sitenav {
            height: 40px;
            background-image: url('top_light.png');
            background-repeat: repeat-x;
            background-color: #1a1a1a;
            font-family: "anivers-1","anivers-2",sans-serif;
            color: #adadad;
            
        }
        .sitenav ul {
            list-style: none outside none;
            margin-left: 10px;
        }
        .sitenav ul li {
            display: inline-block;
            font-weight: bold;
            overflow: hidden;
            text-transform: uppercase;
            font-size: 1.1em;
        }
        .sitenav ul li a {
            color: #adadad;
            display: block;
            padding: 10px 10px 3px 10px;
        }
        
        .sitenav ul li a:hover {
            color: #fff;
            background-color: #000;
        }
        
        .sitenav ul li a.selected {
            color: #fff;
            background-color: #c91193;
        }
        
        
        
        p.dropCap:first-letter {
            font-family: font-family: "calluna-1","calluna-2",sans-serif;
            font-size : 400%;
            font-weight : bold;
            float : left;
            width : 1em;
            color : #c91193;
            margin-left: -10px;
        }
       .dropCapWord {
            font-weight : bold;
            color : #c91193;
        }
        .col {
            width: 22em;
            margin: 50px 0 0 100px;
            float: left;
        }
        .richUl ul li {
            border-bottom: 1px solid #cecece;
            color: #C91193;
            display: block;
            font-size: 0.9em;
            font-weight: bold;
            line-height: 30px;
            overflow: hidden;
            padding: 10px 7px 6px 7px;
            text-transform: uppercase;
        }
        .richUl ul li.last {
            border-width: 0;
        }
        .richUl ul li a .arrow {
            margin-left: 6px;
        }
        
    </style>
</head>
<body>
<div class="sitenav">
    <ul>
        <li><a class="selected" href="#">Home</a></li>
        <li><a href="grid.html">Developer</a></li>
        <li><a href="#">Download</a></li>
        <li><a href="#">About</a></li>
    </ul>
</div>

<div class="col">
    <h1>GADGETS IN YOUR IPHONE</h1>
    <p class="dropCap">T<span class="dropCapWord">ake</span> is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques. The arrangement of type involves the selection of typefaces, point size, line length, leading (<a href="#">line spacing</a>), adjusting the spaces between groups of letters (<a href="#">tracking</a>) and adjusting the space between pairs of letters (<a href="#">kerning</a>).</p>
    <div class="richUl">
        <ul>
            <li><a href="#">Learn More<img class="arrow" src="arrowRight.png" width="9" height="13" /></a></li>
            <li><a href="#">Download App<img class="arrow" src="arrowRight.png" width="9" height="13" /></a></li>
            <li class="last"><a href="#">Developing Gadgets<img class="arrow" src="arrowRight.png" width="9" height="13" /></a></li>
        </ul>
    </div>
</div>
<div style="float:left;margin-top:50px;"><img src="iphone.png" /></div>

</body>
</html>
